'use client';
import {useForm} from "react-hook-form";
import {
    Form, FormControl, FormField, FormItem, FormLabel, FormMessage
} from '@/components/ui/form'
import * as z from 'zod'
import {Input} from "@/components/ui/input"
import {zodResolver} from "@hookform/resolvers/zod";
import {Button} from "@/components/ui/button";
import TipTap from "@/components/TipTap";

export default function WritePage() {
    const formSchema = z.object({
        title: z.string()
            .min(5, {message: 'the title is not long enough'})
            .max(100, {message: 'its too long'})
            .trim(),
        // price: z.number().min(5,),
        description: z.string()
            .min(5, {message: 'the title is not long enough'})
            // .max(100, {message: 'its too long'})
            .trim()
    })

    const form = useForm<z.infer<typeof formSchema>>({
        resolver: zodResolver(formSchema),
        mode: 'onChange',
        defaultValues: {
            title: '',
            price: 29.99,
            description: ''
        }
    })

    function onSubmit(values: z.infer<typeof formSchema>) {
        console.log(values)
    }

    return (
        <div className={'p-24'}>
            <Form {...form}>
                <form onSubmit={form.handleSubmit(onSubmit)}>
                    <FormField
                        control={form.control}
                        name={'title'}
                        render={({field}) => (
                            <FormItem>
                                <FormLabel>
                                    Title
                                </FormLabel>
                                <FormControl>
                                    <Input placeholder={'main title'} {...field} />
                                </FormControl>
                                <FormMessage/>
                            </FormItem>
                        )}>
                    </FormField>
                    <FormField
                        control={form.control}
                        name={'description'}
                        render={({field}) => (
                            <FormItem>
                                <FormLabel>
                                    Description
                                </FormLabel>
                                <FormControl className={'w-full h-screen'}>
                                    {/*<EditorContent editor={editor} />*/}
                                    <TipTap
                                        description={`
            descripte   ddd 
        <p>This is a basic example of implementing images. Drag to re-order.</p>
        <img src="https://placehold.co/800x400" />
        <img src="https://placehold.co/800x400/6A00F5/white" />
        <p>
          The focus extension adds a class to the focused node only. That enables you to add a custom styling to just that node. By default, it’ll add <code>.has-focus</code>, even to nested nodes.
        </p>
        <ul>
          <li>Nested elements (like this list item) will be focused with the default setting of <code>mode: all</code>.</li>
          <li>Otherwise the whole list will get the focus class, even when just a single list item is selected.</li>
        </ul>

        <p>
          That’s a boring paragraph followed by a fenced code block:
        </p>
        <pre><code>for (var i=1; i <= 20; i++)
{
  if (i % 15 == 0)
    console.log("FizzBuzz");
  else if (i % 3 == 0)
    console.log("Fizz");
  else if (i % 5 == 0)
    console.log("Buzz");
  else
    console.log(i);
}</code></pre>
        <p>
          Press Command/Ctrl + Enter to leave the fenced code block and continue typing in boring paragraphs.
        </p>
`}
                                        onChange={field.onChange}/>
                                </FormControl>
                                <FormMessage/>
                            </FormItem>
                        )}>
                    </FormField>
                    <Button type={'submit'} className={'my-4'}>
                        Submit
                    </Button>
                </form>
            </Form>
        </div>
    )
}